<!--下发管理弹窗组件-->
<template>
  <div v-loading.fullscreen.lock="loading" element-loading-text="正在下发中...">
    <el-dialog
      title="下发"
      v-model="dialogVisible"
      width="30%"
      center
      align-center
      class="assessmentsAreIssued"
      @close="closeDialog"
      @open="openDialog"
      :close-on-click-modal="false"
    >
      <el-form :model="formData" label-width="auto" :rules="rules" ref="deliveryManagement">
        <el-form-item label="下发名称：" prop="name" placeholder="请输入下发名称">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="下发群组：" prop="groupId">
          <el-select v-model="formData.groupId" placeholder="请选择群组">
            <el-option :label="item.name" :value="item.id" v-for="item in groupData" :key="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="下发人员：">
          <div class="listOfPeople-input" @click="selector(formData.selectUserData)">
            <span v-if="formData.selectUserData.length === 0" class="input-personnelList">请选择人员</span>
            <el-tag
              v-else
              v-for="(item, index) in formData.selectUserData"
              :key="index"
              closable
              class="input-item"
              type="info"
              @close="handleClose(item)"
            >
              {{ item.userName }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item label="答复时间：" prop="issuanceTime">
          <el-date-picker
            v-model="formData.issuanceTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="default"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="timeSelection"
          />
        </el-form-item>
        <el-form-item label="通知标题：" prop="noticeTitle">
          <el-input v-model="formData.noticeTitle" placeholder="请输入通知标题" />
        </el-form-item>
        <el-form-item label="通知内容：" prop="noticeContent">
          <el-input v-model="formData.noticeContent" :rows="3" type="textarea" placeholder="请输入通知内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="danger" @click="groupSubmissions">下发</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <!--人员选择弹窗-->
  <PersonnelSelection ref="personnelSelectionDialog" @submit="submit"></PersonnelSelection>
</template>

<script setup>
import { useTemplateEditing } from "@/store/modules/templateEditing";
import { DELIVER_GROUP_PARAMETERS } from "@/utils/mockConfiguration/mockConfig";
import { omit } from "lodash";
const templateEditing = useTemplateEditing();
const { currentSettings } = storeToRefs(templateEditing);
import PersonnelSelection from "@/components/flowDemo/PersonnelSelectionDialog.vue";
import { ElMessage } from "element-plus";
import { evaluationIssue, getGroup } from "@/api/partyBuilding";
// 下发弹窗状态
const dialogVisible = defineModel("dialogVisible", {
  type: Boolean,
  required: true,
  default: false,
});
// 选择模板
const rules = reactive({
  name: [{ required: true, message: "请输入下发标题", trigger: "blur" }],
  groupId: [
    {
      required: true,
      message: "请选择下发群组",
      trigger: "change",
    },
  ],
  selectUserData: [{ type: "array", required: true, message: "请选择人员", trigger: "blur" }],
  issuanceTime: [{ type: "array", required: true, message: "请选择下发时间", trigger: "blur" }],
  noticeTitle: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
  noticeContent: [{ required: true, message: "请输入通知内容", trigger: "blur" }],
}); //下发管理表单校验
const formData = reactive({
  name: "",
  id: "", //模板id
  groupId: "", //下发群组id
  issuanceTime: [], //下发时间范围
  startTime: "", //测评开始时间
  endTime: "", //测评结束时间
  selectUserData: [], //额外下发人员
  noticeTitle: "", //通知标题
  noticeContent: "", //通知内容
}); //新增群组表单数据
const groupData = ref(); //群组列表数据
/**
 * 打开弹窗根据是否传入的数据填充到选择模板
 */
const openDialog = async () => {
  const { name, id } = currentSettings.value;
  Object.assign(formData, { name, id });
  const { rows } = await getGroup(DELIVER_GROUP_PARAMETERS);
  groupData.value = rows;
};
const personnelSelectionDialog = ref(); //人员选择弹窗
const deliveryManagement = ref(null); //下发管理表单实例
/**
 * 人员选择弹窗提交
 * @param value 数据
 */
const submit = value => (formData.selectUserData = value);
/**
 * 关闭弹窗重置数据
 */
const closeDialog = () => deliveryManagement.value.resetFields();
/**
 * 打开人员选择弹窗
 * @param value 人员待选数据
 */
const selector = value => personnelSelectionDialog.value.showDialog(value);
/**
 * 人员删除
 * @param value 删除的元素
 */
const handleClose = value => (formData.selectUserData = formData.selectUserData.filter(item => item.userId !== value.userId));
/**
 * 下发管理弹窗时间选择
 */
const timeSelection = value => {
  const [startTime, endTime] = value;
  Object.assign(formData, { startTime, endTime });
};
const loading = ref(false); //提交loading
/**
 * 下发管理提交
 * @returns {Promise<void>}
 */
const groupSubmissions = async () => {
  const calibration = await deliveryManagement.value.validate();
  if (!calibration) {
    return;
  }
  const data = omit(formData, "issuanceTime"); //接口不需要时间范围参数
  const newFormData = {
    ...data,
    selectUserData: JSON.stringify(data.selectUserData),
  };
  loading.value = true;
  await evaluationIssue(newFormData);
  ElMessage.success("下发成功");
  loading.value = false;
  dialogVisible.value = false;
};
</script>

<style scoped lang="less">
.assessmentsAreIssued {
  .el-dialog__body {
    .el-select.el-select--default {
      width: 100%;
    }
    .listOfPeople-input {
      border: 1px solid #dcdfe6;
      min-height: 60px;
      cursor: pointer;
      color: #c3c3c3;
      width: 100%;
      padding: 0 11px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 10px;
      box-sizing: border-box;
    }
  }
}
</style>
<style lang="less">
.el-overlay-dialog {
  .assessmentsAreIssued {
    border-radius: 15px;
    margin-top: auto !important;
    .el-dialog__header {
      font-size: 22px;
      .el-dialog__title {
        font-size: 22px;
        color: #351d1d;
        font-weight: 700;
      }
      .el-dialog__headerbtn {
        font-size: 28px;
      }
    }
    .el-dialog__body {
      .addInBatches-text {
        font-size: 20px;
        color: #351d1d;
        text-align: center;
        font-weight: 400;
      }
      .personnelDetails-content {
        .content-title {
          font-size: 20px;
          color: #351d1d;
          font-weight: 700;
          text-align: center;
          margin-bottom: 20px;
          .title-name {
            margin-bottom: 10px;
          }
          .title-code {
            margin-bottom: 20px;
          }
          .title-avatar {
            width: 231px;
            height: 324px;
            margin: 0 auto;
            img {
              width: 100%;
              object-fit: cover;
            }
          }
        }
        .content-content {
          font-size: 18px;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
